<template>
  <el-container id="home-container">
    <el-header>
      <div class="el-header">
        <!-- <img src="../assets/企业微信截图_17219819415353.png" /> -->
        <img style="width:100px;height:60px" src="../assets/logo.png" />
        <span>后台管理系统</span>
      </div>
      <el-button type="info" @click="tuichu()">退出</el-button>
    </el-header>
    <el-container>
      <el-aside
        :width="isCollapse ? '64px' : '200px'"
        style="overflow-x: hidden"
      >
        <div class="toggle-button" @click="toggleCollapse">|||</div>

        <el-menu
  background-color="#000000"
  text-color="#ffffff"
  active-text-color="#409EFF"
  class="el-menu-vertical-demo"
  style="text-align: left"
  :unique-opened="true"
  :collapse="isCollapse"
  :collapse-transition="false"
  router
  :default-active="activepath"
>
  <!-- 一级菜单 -->
  <el-submenu
    :index="item.path"
    v-for="item in asideArr"
    :key="item.path"
  >
    <template slot="title">
      <i :class="item.icon"></i>
      <span>{{ item.title }}</span>
    </template>

    <!-- 二级菜单 -->
    <template v-for="subItem in item.children">
      <!-- 如果二级菜单有 children，则渲染为三级菜单 -->
      <el-submenu
        v-if="subItem.children && subItem.children.length"
        :index="subItem.path"
        :key="subItem.path"
      >
        <template slot="title">
          <i :class="subItem.icon"></i>
          <span>{{ subItem.title }}</span>
        </template>

        <!-- 三级菜单 -->
        <el-menu-item
          :index="subSubItem.path"
          v-for="subSubItem in subItem.children"
          :key="subSubItem.path"
          @click="activeStatus(subSubItem.path)"
        >
          <i :class="subSubItem.icon"></i>
          <span>{{ subSubItem.title }}</span>
        </el-menu-item>
      </el-submenu>

      <!-- 如果二级菜单没有 children，则直接渲染为菜单项 -->
      <el-menu-item
        v-else
        :index="subItem.path"
        :key="subItem.path"
        @click="activeStatus(subItem.path)"
      >
        <i :class="subItem.icon"></i>
        <span>{{ subItem.title }}</span>
      </el-menu-item>
    </template>
  </el-submenu>
</el-menu>
      </el-aside>
      <!-- <common-aside></common-aside> -->
      <el-container>
        <el-main>
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </el-container>
</template>


<script >
import CommonAside from "../components/CommonAside.vue";
import axios from 'axios';
import { getUserTreeMenu } from "../api/users";
export default {
  components: {
    CommonAside,
    //CommonAside:()=>import('../components/CommonAside.vue')
  },
  data() {
    return {
      isCollapse: false,
      activepath: "",
      asideArr:[],
      // asideArr: [
      //   {
      //     path: "/user",
      //     title: "系统管理",
      //     icon: "el-icon-edit",
      //     children: [
      //       {
      //         path: "/users",
      //         title: "用户列表",
      //         icon: "el-icon-share",
      //       },
      //       {
      //         path: "/roles",
      //         title: "角色列表",
      //         icon: "el-icon-delete",
      //       },
      //       {
      //         path: "/menu",
      //         title: "菜单列表",
      //         icon: "el-icon-delete",
      //       },
      //     ],
      //   },
      //   {
      //     path: "/test",
      //     title: "测试",
      //     icon: "el-icon-edit",
      //     children: [
      //       {
      //         path: "/test1",
      //         title: "测试1",
      //         icon: "el-icon-warning-outline",
      //       },
      //       {
      //         path: "/datainsert",
      //         title: "数据录入",
      //         icon: "el-icon-user",
      //       },
      //       {
      //         path: "/formalCustomer",
      //         title: "报表",
      //         icon: "el-icon-user",
      //       },
      //       {
      //         path: "/files",
      //         title: "文件列表",
      //         icon: "el-icon-folder-opened",
      //       },
      //       {
      //         path: "/userinformation",
      //         title: "用户信息",
      //         icon: "el-icon-user",
      //       },
      //       {
      //         path: "/treemenu",
      //         title: "树形菜单",
      //         icon: "el-icon-coin",
      //       },
      //       {
      //         path: "/treetablemenu",
      //         title: "树形菜单table",
      //         icon: "el-icon-coin",
      //       },
      //       {
      //         path: "/father",
      //         title: "父组件",
      //         icon: "el-icon-coin",
      //       },
            
      //     ],
      //   },
      // ],
      iconsobj: {},
    };
  },
  created() {
    this.activepath=window.sessionStorage.getItem('activepath');
    this.getmenu();
  },
  methods: {
    getmenu() {
      console.log('getmenu')
      getUserTreeMenu(window.localStorage.getItem("userCode")).then((res) => {
        this.asideArr=res.treelist;
        // console.log(res.menulist)
        window.localStorage.setItem("routher",res.menulist)
        // console.log(window.localStorage.getItem("routher"))
      });
    },
    toggleCollapse() {
      console.log("点击事件触发");
      this.isCollapse = !this.isCollapse;
    },
    activeStatus(activepath) {
      console.log("保存path");
      //本地存储session
      window.sessionStorage.setItem("activepath", activepath);
      this.activepath=activepath;
    },
    tuichu(){
      console.log("退出功能触发");
      this.$router.push("/");
      window.localStorage.clear("token")
    }
  },
  mounted(){
    axios.get('/mock/news').then(res=>{
      // console.log(res);
    })
  }
};
</script>

<style lang="less" scoped>
#home-container {
  height: 100%;
}
.el-header {
  //width: 100%;
  background-color: #000000;
  //   color: #333;
  //   text-align: center;
  //   line-height: 60px;
  display: flex;
  justify-content: space-between;
  padding-left: 0px;
  align-items: center;
  font-size: 20px;
  color: #fff;
  > div {
    display: flex;
    align-items: center;
    span {
      margin-left: 15px;
    }
  }
}

.el-aside {
  background-color: #000000;
  color: #333;
  text-align: center;
  line-height: 200px;
}

.el-main {
  background-color: #e9eef3;
  color: #333;
  text-align: center;
  line-height: 160px;
}

body > .el-container {
  margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}
.toggle-button {
  background-color: #4a5064;
  font-size: 10px;
  line-height: 24px;
  color: #fff;
  text-align: center;
  letter-spacing: 0.2em;
  cursor: pointer;
}
</style>
